<!--
 *@Date: 2022-12-21 10:05:09
 * @LastEditTime: 2023-02-08 15:22:25
 *
 * @Description:
-->

<template>
    <view class="container">
        <view style="flex:1;min-height:35px;" @tap="open">{{ value }}</view>
        <uni-icons @tap="clear" v-if="value && value.length > 0" color="#c0c4cc" type="clear" size="24"></uni-icons>
        <uni-icons v-else color="#999999" size="14"></uni-icons>
        <uni-popup ref="popup" type="bottom" background-color="#F5F7F8">
            <view class="popup-content">
                <uni-search-bar style="flex:1" v-model="searchKey" bgColor="#fff" radius="5" placeholder="请输入关键字"
                    clearButton="auto" cancelButton="none" @confirm="search" />
                <scroll-view scroll-y @scrolltolower="scrollToLower" class="scroll">
                    <uni-group v-for="(item, index) in list" :key="index" :title="'第' + (index + 1) + '条记录'" mode="card"
                        top="0">
                        <view>
                            代码：{{ item.dm }}
                        </view>
                        <view>名称：{{ item.mc }}</view>
                        <button type="primary" @tap="choose(item)">选择</button>
                    </uni-group>
                    <uni-load-more :status=loadMoreStatus></uni-load-more>
                </scroll-view>
            </view>
        </uni-popup>
    </view>
</template>
<script setup lang="ts">
import { useDistStore } from '@/stores/modules/dist';
import { nextTick, reactive, ref, watch } from 'vue';
const list = ref([] as any)
const value = ref("")
const page = reactive({
    totalPage: 0,
    pageNumber: 1,
})
const loadMoreStatus = ref('loading')
const searchKey = ref("")
const popup = ref()
const props = defineProps({
    modelValue: {
        type: String,
    },
    zdlb: {
        type: String,
        required: true
    },
    name: {
        type: String,
        required: true
    }
})
if (props.name) {
    value.value = props.name
}

watch(() => props.name, (newValue) => {
    if (newValue) {
        value.value = newValue
    }
})
const open = () => {
    getList()
    popup.value.open('bottom')
}
const getList = () => {
    useDistStore().getDictSearch(props.zdlb, page.pageNumber, searchKey.value).then((result: any) => {
        page.totalPage = result.totalPage;
        if (page.pageNumber === 1) {
            list.value = result.list
        } else {
            page.pageNumber = result.pageNumber;
            list.value = list.value.concat(result.list);
        }
        if (page.totalPage > page.pageNumber) {
            loadMoreStatus.value = 'more'
        } else {
            loadMoreStatus.value = 'noMore'
        }
    })
}
const loadMore = () => {
    if (page.totalPage <= page.pageNumber) return
    loadMoreStatus.value = 'loading'
    page.pageNumber = page.pageNumber + 1
    getList()
}
const search = () => {
    page.pageNumber = 1
    getList()
}
const scrollToLower = () => {
    loadMore()
}
const clear = () => {
    value.value = ''
    emits('update:modelValue', '')
}
const emits = defineEmits(['update:modelValue']);
const choose = (item: any) => {
    value.value = item.mc
    emits('update:modelValue', item.dm)
    popup.value.close()

}
</script>
<style lang="scss" scoped>
.popup-content {
    height: 80vh;
    padding: 20rpx;
}

.container {
    min-height: 35px;
    line-height: 35px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    padding: 0 5px 0 10px;
    align-items: center;
    flex: 1;
    text-align: left;
}

.scroll {
    height: calc(80vh - 37px);
    padding: 10rpx 0;
}
</style>
